{layout name="layout" /}
<style type="text/css">
    .layui-table td.layui-form{
        padding: 0px 15px 4px;
    }
</style>
<table class="layui-table" lay-even>
    <colgroup>
        <col width="80">
        <col width="240">
        <col width="60">
        <col>
        <col width="240">
    </colgroup>
    <thead>
        <tr>
            <th>任务ID</th>
            <th>名称</th>
            <th>状态</th>
            <th>任务配置</th>
            <th>操作</th>
        </tr> 
    </thead>
    <tbody>
        {volist name="data" id="row"}
        <tr data-id={$row.id}>
            <td>{$row.id}</td>
            <td>{$row.name}</td>
            <td class="layui-form"><input type="checkbox" name="状态" lay-skin="switch" value="{$row.status}" lay-filter='status' {if $row.status}checked{/if}></td>
            <td>{$row.minute}&nbsp;&nbsp;{$row.hour}&nbsp;&nbsp;{$row.day}&nbsp;&nbsp;{$row.month}&nbsp;&nbsp;{$row.week}</td>
            <td></td>
        </tr>   
        {/volist}
    </tbody>
</table>
<script type="text/javascript">
    layui.use(['jquery', 'form', 'layer'], function() {
        var form = layui.form(), layer = layui.layer, $ = layui.jquery;
        var tId = null;
        // 任务的 开启 和 通用 操作
        $('td[class="layui-form"]>input[type="checkbox"]').next('div').on('mouseover mouseout', function(event) {
            var self = this;
            if (event.target !== self) {
                return  false;
            }
            if (event.type === 'mouseover') {
                tId = setTimeout(function() {
                    layer.tips('(开启 / 停用)任务', self, {time: 1500});
                }, 200);
            } else if (event.type === 'mouseout') {
                clearTimeout(tId);
            }
        });
        form.on('switch(status)', function(obj) {   // 任务状态的开启 和 关闭
            var new_status = (obj.value === '0') ? 1 : 0, data_id = $(obj.elem).parents('tr').attr('data-id');
            $.ajax("{:url('swoole/task/ajaxupdate')}", {type: 'POST', dataType: 'json',
                data: {id: data_id, status: new_status}, success: function(data) {
                    $(obj.elem).val(new_status);
                }
            });
        });
    });
</script>